<template>
  <div class="app-container">
    <section>
      <div class="contentBox">
        <div class="title">
          <span>{{ $route.query.title }}</span>
        </div>
        <div class="content">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            class="form"
            label-width="110px"
          >
            <el-form-item
              v-if="coupon_no"
              label="优惠券编号:"
              style="width: 100%"
            >
              <el-input v-model="coupon_no" readonly="readonly"></el-input>
            </el-form-item>
            <el-form-item label="名称:" prop="title" style="width: 100%">
              <el-input v-model="form.title" readonly="readonly"></el-input>
            </el-form-item>
            <el-form-item label="类型:" style="width: 100%" prop="off_type">
              <el-select
                style="width: 250px"
                clearable
                v-model="form.off_type"
                placeholder=""
                :disabled="true"
              >
                <el-option label="满减券" value="0"> </el-option>
                <el-option label="折扣券" value="1"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="类别:" style="width: 100%">
              <!-- <el-radio-group v-model="form.type">
                <el-radio :label="1">促销优惠</el-radio>
                <el-radio :label="2">实体次卡券</el-radio>
                <el-radio :label="3">霸王餐</el-radio>
              </el-radio-group> -->
              <el-select
               :disabled="true"
                style="width: 250px"
                clearable
                v-model="form.type"
                placeholder=""
              >
                <el-option label="促销优惠" value="1"> </el-option>
                <el-option label="实体次卡券" value="2"> </el-option>
                <el-option label="霸王餐" value="3"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="使用范围:"
              prop="coupon_scope_use_id"
              style="width: 100%"
            >
              <el-select
                style="width: 250px"
                clearable
                v-model="form.coupon_scope_use_id"
                placeholder=""
                :disabled="true"
              >
                <el-option label="通用券" value="0"> </el-option>
                <el-option label="商品券" value="1"> </el-option>
                <el-option label="项目券" value="2"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="有效时间:"
              prop="start_time"
              style="width: 100%"
            >
              <el-date-picker
                :readonly="true"
                v-model="times"
                type="datetimerange"
                align="right"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="timestamp"
                @change="pickerDate"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              v-if="form.off_type == 0"
              label="满减设置:"
              prop="min_value"
              class="timerInput timerInput2"
            >
              <span class="mrginL">满</span>
              <el-input
                type="number"
                v-model="form.min_value"
                :readonly="true"
              ></el-input>
              <span>元</span>
            </el-form-item>
            <el-form-item
              v-if="form.off_type == 0"
              prop="face_value"
              class="timerInput timerInput1"
            >
              <span class="mrginL">减</span>
              <el-input
                type="number"
                v-model="form.face_value"
                :readonly="true"
              ></el-input>
              <span>元</span>
            </el-form-item>
            <el-form-item
              v-if="form.off_type == 1"
              label="折扣设置:"
              prop="discount"
              class="timerInput"
            >
              <el-input
                type="number"
                v-model="form.discount"
                placeholder="请输入"
                :readonly="true"
              ></el-input>
              <span>折</span>
            </el-form-item>
            <el-form-item
              v-if="form.off_type == 1"
              label="优惠上限:"
              prop="max_discount"
              class="timerInput"
            >
              <el-input
                type="number"
                v-model="form.max_discount"
                placeholder="请输入"
                :readonly="true"
              ></el-input>
              <span>元</span>
            </el-form-item>
            <el-form-item
              label="数量:"
              prop="number"
              class="timerInput"
              style="width: 100%"
            >
              <el-input
                type="number"
                v-model="form.number"
                placeholder="请输入"
                :readonly="true"
              ></el-input>
              <span>张</span>
            </el-form-item>
            <el-form-item
              label="门店限制:"
              style="width: 100%"
              prop="store_ids"
            >
              <el-select
                style="width: 250px"
                clearable
                v-model="store_ids"
                placeholder=""
                multiple
                @change="selectChange"
                :disabled="true"
              >
                <el-option
                  v-for="(ele, index) in list"
                  :key="index"
                  :label="ele.title"
                  :value="ele.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="卡券说明:" style="width: 100%" prop="remarks">
              <el-input
                v-model="form.remarks"
                placeholder="请输入"
                type="textarea"
                :rows="4"
                :readonly="true"
              ></el-input>
            </el-form-item>
          </el-form>
          <div style="margin-top: 40px">
            <el-button style="width: 110px" @click="$router.go(-1)"
              >取消</el-button
            >
            <!-- <el-button
              v-if="!type"
              type="primary"
              style="width: 110px"
              @click="save"
              >保存</el-button
            > -->
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      type: "",
      coupon_no: "",
      times: "",
      value1: false,
      editor: "",
      form: {
        type:'',
        id: "",
        title: "",
        min_value: "",
        face_value: "",
        off_type: "",
        coupon_scope_use_id: "",
        start_time: "",
        end_time: "",
        number: "",
        store_ids: "",
        remarks: "",
        discount: "",
        max_discount: "",
      },
      store_ids: [],
      rules: {
        title: [
          { required: true, message: "请输入优惠券标题", trigger: "blur" },
        ],
        min_value: [
          { required: true, message: "请输入满减金额", trigger: "blur" },
        ],
        face_value: [
          { required: true, message: "请输入优惠金额", trigger: "blur" },
        ],
        off_type: [
          { required: true, message: "请选择优惠类型", trigger: "change" },
        ],
        coupon_scope_use_id: [
          {
            required: true,
            message: "请选择优惠券使用范围",
            trigger: "change",
          },
        ],
        start_time: [
          {
            required: true,
            message: "请选择优惠券有效日期",
            trigger: "change",
          },
        ],
        number: [
          { required: true, message: "请输入优惠券数量", trigger: "blur" },
        ],
        store_ids: [
          { required: true, message: "请选择门店限制", trigger: "blur" },
        ],
        remarks: [
          { required: true, message: "请输入卡券说明", trigger: "blur" },
        ],
        discount: [{ required: true, message: "请输入折扣", trigger: "blur" }],
        max_discount: [
          { required: true, message: "请输入优惠上限", trigger: "blur" },
        ],
      },
      roleList: [],
      list: [],
    };
  },
  created() {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id;
      this.getDetails();
    }
    if (this.$route.query.type) {
      this.type = this.$route.query.type;
    }
    this.getList();
  },
  mounted() {},
  methods: {
    selectChange(e) {
      this.form.store_ids = e;
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
    // 获取详情
    async getDetails() {
      let { code, data } = await this.$Http.getCoupons(this.form);
      if (code) {
        this.coupon_no = data.coupon_no;
        this.form.title = data.title;
        this.form.off_type = JSON.stringify(data.off_type);
        this.form.coupon_scope_use_id = JSON.stringify(
          data.coupon_scope_use_id
        );
        this.form.type = data.type
        let time = data.start_time * 1000;
        let time1 = data.end_time * 1000;
        this.times = [time, time1];
        this.form.start_time = this.timestampToTime(time / 1000);
        this.form.end_time = this.timestampToTime(time1 / 1000);
        this.form.number = data.number;
        this.store_ids = data.store_ids.map(Number);
        this.form.store_ids = data.store_ids.map(Number);
        this.form.remarks = data.remarks;
        if (data.off_type == 0) {
          this.form.min_value = data.min_value;
          this.form.face_value = data.face_value;
        } else {
          this.form.discount = data.discount;
          this.form.max_discount = data.max_discount;
        }
        if(data.type){
           this.form.type = JSON.stringify(data.type)
        }
      }
      console.log(this.form, "11111111111");
    },
    pickerDate(e) {
      console.log(e, "1111111111111");
      this.form.start_time = this.getdate(e[0]);
      this.form.end_time = this.getdate(e[1]);
    },
    getdate(time) {
      var now = new Date(time),
        y = now.getFullYear(),
        m = now.getMonth() + 1,
        d = now.getDate();
      return (
        y +
        "-" +
        (m < 10 ? "0" + m : m) +
        "-" +
        (d < 10 ? "0" + d : d) +
        " " +
        now.toTimeString().substr(0, 8)
      );
    },
    //  获取所有门店
    async getList() {
      let { code, data } = await this.$Http.getAllStore();
      this.list = data;
      if (this.list.length && !this.form.id) {
        let arr = [];
        this.list.forEach((ele) => {
          arr.push(ele.id);
        });
        this.store_ids = arr;
        this.form.store_ids = arr;
        console.log(this.form.store_ids, "fdf");
      }
    },
    // 新增优惠券
    save() {
      if (this.form.number <= 0) {
        this.$message.error("优惠券数量不能少于1");
        return;
      }
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.form.store_ids = this.store_ids.join(",");
          let { code, data } = await this.$Http.setCoupon(this.form);
          if (code) {
            if (this.form.id) {
              this.$message.success("编辑成功");
            } else {
              this.$message.success("添加成功");
            }
            this.$router.go(-1);
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  section {
    .contentBox {
      background: #fff;
      border-radius: 8px;
      padding: 0px 24px 20px;
      min-width: 700px;
      min-height: calc(100vh - 165px);
      .title {
        line-height: 70px;
        font-size: 18px;
        font-weight: 600;
        color: #383b40;
        .el-icon-close {
          cursor: pointer;
        }
      }
    }
    .content {
      max-width: 700px;
      height: 100%;
      .form {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
      }
    }
  }
}
::v-deep {
  .el-input {
    width: 250px;
  }
}
.timerInput {
  .el-input {
    width: 120px;
    margin: 0 15px 0 0;
  }
}
.mrginL {
  margin: 0 15px;
}
.timerInput1 {
  ::v-deep {
    .el-form-item__content {
      margin-left: 20px !important;
    }
  }
}
.wrap {
  display: flex;
  p {
    margin-right: 20px;
    line-height: 35px;
    border-radius: 4px;
    background: #f1f1f1;
    font-size: 16px;
    padding: 0 20px;
  }
}
p {
  margin: 0;
}
.addTxt {
  color: #1890ff;
}
</style>